<template>
  <view class="logistics-detail">
    <view class="card">
      <view class="card-title">
        <span>
          <span>{{ logiList.shipper }}</span
          >快递
          <span style="margin-left: 18rpx">{{ logiList.logisticCode }}</span>
        </span>
        <span @click="onCopy(logiList.logisticCode)">复制</span>
      </view>
      <view class="time-line">
        <u-time-line v-if="logiList.traces && logiList.traces.length != 0">
          <u-time-line-item
            nodeTop="2"
            v-for="(item, index) in logiList.traces"
            :key="index"
          >
            <!-- 此处自定义了左边内容，用一个图标替代 -->
            <template v-slot:node>
              <view
                v-if="index == logiList.traces.length - 1"
                class="u-node"
                :style="{ background: $lightColor }"
                style="padding: 0 4px"
              >
                <!-- 此处为uView的icon组件 -->
                <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
              </view>
            </template>
            <template v-slot:content>
              <view>
                <!-- <view class="u-order-title">待取件</view> -->
                <view
                  class="u-order-desc"
                  :style="{ color: index == 0 ? '#009968' : '' }"
                  >{{ item.AcceptStation }}</view
                >
                <view class="u-order-time">{{ item.AcceptTime }}</view>
              </view>
            </template>
          </u-time-line-item>
        </u-time-line>
        <u-empty
          class="empty"
          v-else
          text="目前没有物流订单"
          mode="list"
        ></u-empty>
      </view>
      <view class="address-box">
        <view class="top">
          <span class="tip">收</span>
          <span>{{ consigneeAddressPath }}{{ consigneeDetail }}</span>
        </view>
        <view class="bottom">
          <span>{{ consigneeName }}</span>
          <span>{{ consigneeMobile }}</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getExpress } from "@/api/trade.js";
import views from "../../../tabbar/home/views.vue";
export default {
  components: { views },
  data() {
    return {
      express: "",
      resData: {
        title: "物流详情",
      },

      logiList: "",
      activeStep: 0,
      consigneeAddressPath: "",
      consigneeDetail: "",
      consigneeMobile: "",
      consigneeName: "",
    };
  },
  methods: {
    onCopy(sn) {
      this.$options.filters.setClipboard(sn);
    },
    init(sn) {
      getExpress(sn).then((res) => {
        this.logiList = res.data.result;
      });
    },
  },
  onLoad(option) {
    let sn = option.order_sn;
    this.consigneeAddressPath = option.consigneeAddressPath;
    this.consigneeDetail = option.consigneeDetail;
    this.consigneeMobile = option.consigneeMobile;
    this.consigneeName = option.consigneeName;
    this.init(sn);
  },
};
</script>

<style lang="scss">
.logistics-detail {
  padding: 16rpx;
  background: #fafafa;
}
.card {
  background: #fff;
  border-radius: 24rpx;
  padding: 32rpx 28rpx;
  width: 100%;
  > .card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24rpx;
    margin-bottom: 40rpx;
  }
  > .time-line {
    // padding: 16rpx 32rpx;
  }
  .address-box {
    height: 120rpx;
    padding-top: 35rpx;
    display: flex;
    flex-direction: column;
    border-top: 1rpx solid #e7e7e7;
    .top {
      display: flex;
      align-items: center;
      color: #212121;
      font-size: 28rpx;
      .tip {
        width: 40rpx;
        height: 40rpx;
        background: #eeeeee;
        border-radius: 50%;
        margin-right: 18rpx;
        color: #757575;
        font-size: 22rpx;
        line-height: 40rpx;
        text-align: center;
      }
    }
    .bottom {
      margin-left: 58rpx;
      font-size: 24rpx;
      color: #757575;
      margin-top: 16rpx;
      :first-child {
        margin-right: 18rpx;
      }
    }
  }
}
.u-order-title {
  font-weight: bold;
}
.u-order-desc {
  font-size: 26rpx;
  color: #666;
  margin: 10rpx 0;
}
.u-order-time {
  font-size: 24rpx;
  color: #999;
}
.empty {
  padding: 40rpx 0;
}
</style>
